<template>
 <view class="map-container">
   <map id="map" :latitude="startPoint.latitude" :longitude="startPoint.longitude" :polyline="polyline" 
 	:markers="markers" style="width: 100%; height: 90vh;" :scale="16"
     :show-location="true"
    >
	</map>
	<view class="send-btn">
		<text >正在进行呼叫司机中。。。</text>
		<text>呼叫时长：{{times}}</text>
	</view>
 </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'; 
  import amapWx from '@/static/amap-wx.130.js'; // 引入高德地图SDK
  const times =ref("1秒")
  const oneTime = ref(true);
  const minutes =ref(0);
  const seconds =ref (1);
  const startPoint=ref( {
  	latitude: 26.56045894387685, //纬度
  	longitude: 106.68005128661751, //经度
  	name: '',
  	address: ''
  })
  const markers =ref([])
  const myAmapFunT = ref(null);
  const map = ref(null);
  const mapCtx=ref(null)

  const intervalId =ref(null)


	const startInterval = () => {
	  // 定义定时执行的任务
	  const task = () => {
	     if(minutes.value == 0){
			 times.value=seconds.value+"秒";
		 }else{
			 times.value=minutes.value+"分"+seconds.value+"秒";
		 }
		 
		 seconds.value++;
		 if(seconds.value == 59){
			 minutes.value++;
			 seconds.value=0;
		 }
	  };
	  // 设置定时器
	  intervalId.value = setInterval(task, 1000); // 每秒执行一次
	};
  
  onMounted(() => {
	  
	  startInterval();
  	myAmapFunT.value = new amapWx.AMapWX({
  		//把这个key换成你自己的1
  		key:"d4a7ff001e08634bdd5a79e306e3298f"
  	})
  	getCurrentLocation();
    map.value = new amapWx.AMapWX({
      key: '1ecb10ee8837f9a355719170286d5e3e'
    });
    // 初始化地图实例等操作
  });
  
  //获取当前定位
  const getCurrentLocation=()=> {
  	uni.getLocation({
  		type: 'gcj02',
  		success: function(res) {
  			// console.log('当前：' , res);
  			// console.log('当前位置的经度：' + res.longitude);
  			// console.log('当前位置的纬度：' + res.latitude);
  			startPoint.value.longitude = res.longitude;
  			startPoint.value.latitude = res.latitude;
   
  			getAddress(startPoint.value.longitude + ',' +startPoint.value.latitude)
  		}
  	});
  }
  
  // 解析地址
  	const getAddress=(loc)=> {
  	
  				var myAmapFun = myAmapFunT.value;
  				if (loc !== null && loc !== '' && loc !== undefined) {
  					myAmapFun.getRegeo({
  						iconPath: 'http://img.wisdomtaxi.com/amap_icon.png',
  						width: '37.5rpx',
  						height: '37.5rpx',
  						location: loc,
  						success: function(data) { //成功回调
  							// console.log('地址解析',data)
  							startPoint.value.name = data[0].name
  							startPoint.value.address = data[0].desc
   
  							initMap()
  						},
  						fail: function(info) { //失败回调
  							console.log(info)
  						},
  					});
  				}
  			}
	//初始化地图数据
	const initMap=()=> {
		markers.value.push({
			id: 1,
			latitude: startPoint.value.latitude, //纬度
			longitude:startPoint.value.longitude, //经度
			iconPath: '/static/images/home/start.png', //显示的图标
			rotate: 0, // 旋转度数
			width: 30, //宽
			height: 30, //高
			title:startPoint.value.name, //标注点名
			// alpha: 0.5, //透明度
			joinCluster: true,
			customCallout: {
				anchorY: 0,
				anchorX: 0,
				display: "ALWAYS",
			},
		})	 
	}
	
  
</script>

<style>
.send-btn {
			margin-top: 30rpx;
			width: 100%;
			color: white;
			background-color: #ffa602;
			padding: 0 24rpx;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			text-align: center;
		}
</style>